import { View } from "@tarojs/components"
import { memo } from "react"
import './index.scss'
import { Checkbox } from ".."


interface Option {
  name: string
  value: any
}

interface TextInputProps {
  label: string
  value?: any
  disabled?: boolean
  options: Option[]
  onChange: (value: any) => void
}

const CheckboxInput = ({ value, onChange, label, options }: TextInputProps) => {
  return (
    <View className='checkbox-input pv-normal-mh-normal'>
      <View className='row-start-center'> 
        <View className='label text-primary-bold'>{label}</View>
        <View className='flex-1 row-start-center flex-wrap'>
          {options.map((option, index) => (
            <Checkbox
              key={option.value}
              label={option.name}
              checked={value === option.value}
              onChange={() => onChange(option.value)}
              className={index ? 'ml-large' : ''}
            />
          ))}
        </View>
      </View>
    </View>
  )
}

export default memo(CheckboxInput)